10156
1241 
Я абсолютный новичок, две недели занимался самообучением, готовясь к предстоящему через месяц буткемпу. Стремясь улучшить свои навыки и «научиться думать как разработчик», я взялся за проект, который пытается решить реальную проблему.
Моя жена ведет бизнес, требуя, чтобы она выставляла счета своим клиентам. Я пытаюсь использовать HTML и JavaScript для создания веб-приложения, которое позволяет ей быстро создавать собственные счета вместо того, чтобы каждый раз выписывать их вручную.
В текущей версии подсказка запрашивает у нее номер. Это число генерирует равное количество строк из трех столбцов в HTML. Это позволяет ей настроить счет-фактуру с точным количеством необходимых ей полей.
В столбце 1 указано название продукта. В той же строке столбец 2 содержит количество единиц, а столбец 3 содержит общую стоимость этого продукта, которая представляет собой базовую цену, умноженную на количество единиц. Я хочу, чтобы этот расчет производился при нажатии кнопки. Но я застрял.
Чтобы выполнить математику, мне нужно иметь возможность получать целые числа из каждой строки и столбца и передавать их в функцию. Но поскольку каждая строка и столбец были созданы автоматически, они не имеют уникальных атрибутов и поэтому не могут быть идентифицированы. Я могу выполнять вычисления по каждому столбцу, но не по каждой строке.
Поскольку я новичок, узнав только пару вводных курсов Codecademy и несколько видеороликов на YouTube, я не знаю, как оценить, полностью ли я подхожу к проекту, или есть ли какой-то трюк, который мне не хватает, или если что-то еще не узнал. Если бы кто-то с некоторым опытом мог подтолкнуть меня в правильном направлении, я был бы очень признателен!
Я прикрепил весь код к этому сообщению. Извините, если это ужасный беспорядок. Полегче со мной, я новичок!
const invDate = Дата ();
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
let invoicedName = prompt ('Кому выписан этот счет?', 'Введите имя');
let productFields = Number (prompt ('Сколько наименований продуктов в этом счете?', 'Пожалуйста, введите число'));
пусть поля = ''
пусть dynHtml = ''
if (invoicedName! = null && productFields! = null) {
for (let i = 1; i <= productFields; i ++) {
fields + = field};
} else {alert ('Пожалуйста, введите допустимые данные.');
};
dynHtml = "
  
 
" +
"
 СЧЕТ 
" +
"
 Подготовлено для: " + invoicedName + ", на" +
"
" + invDate + "
 
 
" +
поля + "
 
" +
" 
";
документ.write (dynHtml);
document.getElementById ('вычислить'). onclick = function getQtyFields () {
пусть qtyInputs = document.getElementsByName ('qty'),
resultQty = 0;
for (let j = 0; j
2020-12-15 08:13:02 
Как вы сказали, ваша основная проблема - найти способ дать каждому полю ввода в их собственной строке свой уникальный идентификатор. Таким образом вы можете рассчитать цену для каждой строки и вставить ее в поле цены.
Сначала вам нужно начать с полей:
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
...
for (let i = 1; i <= productFields; i ++) {
fields + = field};
...
};
Каждой группе нужен свой идентификатор. Таким образом, вы можете позже обращаться к каждому входу в каждой строке для расчета промежуточной итоговой цены. Атрибут class - это то, что вы можете назначить нескольким элементам, чтобы ссылаться на них позже. Этот класс может быть любым, если он не конфликтует с классом любой другой строки. Вы можете использовать i цикла в качестве идентификатора, поскольку он меняется с каждым циклом.
for (let i = 1; i <= productFields; i ++) {
var field = " " +
" " +
"  
 
";
поля + = поле
};
Это добавит строку класса- {i} в каждое поле в каждой строке. А еще лучше, вы можете преобразовать это в отдельную функцию
function generateFields (i) {
return " " +
" " +
"  
 
";
}
for (let i = 1; i <= productFields; i ++) {
fields + = generateFields (i);
};
Вы получите что-то похожее на следующий html
 
 
  
 

 
 
  
 

 
 
  
 

Теперь в своей функции вычисления вы можете обратиться к этим строкам и вычислить их цену. Здесь вы можете перебрать поля ввода «элемент».
document.getElementById ('вычислить'). onclick = function getQtyFields () {
let itemInputs = document.getElementsByName ('элемент')
for (let i = 0; i )
for (let i = 0; i  \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ " = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66233C28.48334.66231 29.4502 4.66231C28.41087C 4.58.48334.66231 29.4502 4.66231C28.4136023 4.6623.75.4502 4.66231C28.40334.6554.69904.4502 4.66231C28.40337.45 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.7799 28.121 12.834.13011228425.2834.2832.132834.228.1161 12.7799 28.121 12.8343.130132225.234.27.2832.130.130.1284.28 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.5218 22.5437 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 15.6887C21.2429 16.7375 22.9072 17.6335 25.6622 17.6317224.97.066 7327249249 7329249 7667 7329249 7649 7327.0 9 732424.97.0 27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.27932Z \ "/ \ u003e \ u003cpath d = \" M16.80829. 1362.235.29 Cpath, d = \ "M16.80829. 1362. 945128 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.6281462 8,5327809 4,62866C9.34336 4.6281462 6,5327809 4,62866C9.34336 4.6281462 7327809.5 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 10.91179C12.862.73.93.8119.8115.844.8119.8119.8115.91179C10.862.98 C13.4375 13.8962 13.9157 13.2535 13.9157 11.9512V8.90741C13.9157 7.58817 14.3365 6.91179 15.4269 6.91179 C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \ "M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.59049V11.9512C0.313354 13.2535 0.791758 13.8962 1.82471 13.8962C5621675813.9 u003e \ u003cpath d = \ "M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3.57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 \ u0030001 2.87869 3.7234 1.98861C3. \ "/> \ u003c / svg> \ u003c / a>",
contentPolicyHtml: "Вклады пользователей под лицензией \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "> (политика содержания) \ u003c / a>",
allowUrls: true
},
onDemand: правда,
discardSelector: ".discard-answer"
, немедленноShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Спасибо за ответ на Stack Overflow!
Обязательно ответьте на вопрос. Предоставьте подробную информацию и поделитесь своим исследованием!
Но избегайте…
Просить о помощи, разъяснениях или отвечать на другие ответы.
Делать заявления, основанные на мнении; поддержать ихсо ссылками или личным опытом.
Чтобы узнать больше, ознакомьтесь с нашими советами по написанию отличных ответов.
Черновик сохранен
Черновик отклонен
Зарегистрируйтесь или войдите под своим ником
StackExchange.ready (функция () {
StackExchange.helpers.onClickDraftSave ('# ссылка для входа');
});
Зарегистрируйтесь с помощью Google
Зарегистрируйтесь через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Разместить
Опубликовать как гость
имя
Эл. адрес
Обязательно, но не отображается
StackExchange.ready (
function () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f64473339% 2fdynamically-generate-html% 23new-answer', 'question_page');
}
);
Опубликовать как гость
имя
Эл. адрес
Обязательно, но не отображается
Разместите свой ответ
Отменить
Нажимая «Опубликовать ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой файлов cookie.
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками javascript html loops или задайте свой вопрос.